<template>
	<view class="page">
		<view class="nav">
			<view class="nav_right">
				<view class="search" @click="searchinfo">
					<uni-icons class="search_icon" type="search" size="20" color="#B3B3B3"></uni-icons>
					亲！请选择服务哦~！
				</view>
			</view>
		</view>
		<view class="teacher_type">
			<LiFilter @change="change" @select="select" :datalist="datalist" :height="height" @changeTopItem="changeTopItem"></LiFilter>
		</view>
		<view class="teacher_box">
			<mescroll-uni ref="mescrollRef" height="100%" top="0" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			 @up="upCallback">
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../static/img/jing.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
							距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../static/img/ying.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
							距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
				<view class="mechanism_main_item">
					<view class="mechanism_main_item_left">
						<image src="../../static/img/2.jpg" mode=""></image>
					</view>
					<view class="mechanism_main_item_right">
						<view class="text1 clearfix">
							<view class="title fl">
								南山敬
							</view>
							<image class="fl" src="../../static/img/tong.png" mode=""></image>
						</view>
						<view class="text2">
							<view>
								<text>照料护理</text>
								<text>蔬菜</text>
								<text>买菜做饭</text>
							</view>
						</view>
						<view class="text3 clearfix">
							<view class="fl">
								<uni-rate class="pingfen" disabled="true" max="5" size="16" activeColor="#fe6a6a" value="3.5"></uni-rate>
							</view>
						</view>
						<view class="text4">
							距离 10Km
						</view>
						<view class="serverNum">累计服务361次</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>


<script>
	import LiFilter from '@/components/business/Li-Filter/Li-Filter.vue';
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			LiFilter,
			uniRate
		},
		data() {
			return {
				datalist: {},
				height: 0.6,
				title: '机构列表',
				list: [{
					'id': 1,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 2,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 3,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 4,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 5,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 6,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 7,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}, {
					'id': 8,
					'pic': '/static/img/2.jpg',
					'title': '南山敬老院',
					'ranking': '/static/img/jing.png',
					'distance_my': '1100000',
					'type': [{
							'id': 1,
							'text': '照料护理'
						},
						{
							'id': 2,
							'text': '卫生保洁'
						}, {
							'id': 3,
							'text': '卫生保洁'
						}
					],
					'rate': 5,
					'price': '信阳市羊山新区翡翠龙庭11栋楼',
					'Receiving_distance': 10
				}],
				sigleItem: {
					title: '距离最近', //排序头的名称
					value: '距离最近',
					type: 0
				},
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					}
				}
			};
		},
		onLoad() {
			let tempdata = {
				filterType: 1,
				data: []
			};

			let normalItem = {
				title: '服务项目', //排序头的名称
				value: 'a',
				type: 2, //类型，0：没有下拉选项，1：单项下拉列表，2：多项列表，如地区选择
				data: [{
					"value": "01",
					"text": "生产经营型",
					"children": [{
						"value": "0101",
						"text": "酒类副食"
					}, {
						"value": "0102",
						"text": "建筑地产"
					}, {
						"value": "0103",
						"text": "老年用品"
					}, {
						"value": "0104",
						"text": "家具制造"
					}, {
						"value": "0105",
						"text": "金融保险"
					}, {
						"value": "0106",
						"text": "消防安防"
					}, {
						"value": "0107",
						"text": "家用电器"
					}, {
						"value": "0108",
						"text": "厨卫用品"
					}, {
						"value": "0109",
						"text": "电子产品"
					}, {
						"value": "0110",
						"text": "体育器材"
					}, {
						"value": "0111",
						"text": "工程机械"
					}, {
						"value": "0112",
						"text": "医疗机械"
					}, {
						"value": "0113",
						"text": "油漆涂料"
					}, {
						"value": "0114",
						"text": "家装建材"
					}, {
						"value": "0115",
						"text": "园林绿化"
					}, {
						"value": "0116",
						"text": "生态农场"
					}, {
						"value": "0117",
						"text": "养殖水产"
					}, {
						"value": "0118",
						"text": "农业种植"
					}, {
						"value": "0119",
						"text": "旅游景区"
					}, {
						"value": "0120",
						"text": "广告传媒"
					}, {
						"value": "0121",
						"text": "运输快递"
					}]
				}, {
					"value": "02",
					"text": "经营服务型",
					"children": [{
						"value": "0201",
						"text": "美食餐饮"
					}, {
						"value": "0202",
						"text": "宾馆酒店"
					}, {
						"value": "0203",
						"text": "服装鞋帽"
					}, {
						"value": "0204",
						"text": "药店连锁"
					}, {
						"value": "0205",
						"text": "瓜果实蔬"
					}, {
						"value": "0206",
						"text": "手机通讯"
					}, {
						"value": "0207",
						"text": "茶叶茶具"
					}, {
						"value": "0208",
						"text": "蛋糕西点"
					}, {
						"value": "0209",
						"text": "五金水暖"
					}, {
						"value": "0210",
						"text": "瓜果蔬菜"
					}, {
						"value": "0211",
						"text": "窗帘门窗"
					}, {
						"value": "0212",
						"text": "厨卫用品"
					}, {
						"value": "0213",
						"text": "灯具开关"
					}, {
						"value": "0214",
						"text": "美发美甲"
					}, {
						"value": "0215",
						"text": "女性之家"
					}, {
						"value": "0216",
						"text": "汽车之家"
					}, {
						"value": "0217",
						"text": "生活超市"
					}, {
						"value": "0218",
						"text": "茶楼棋牌"
					}, {
						"value": "0219",
						"text": "招商展会"
					}]
				}, {
					"value": "03",
					"text": "服务中介型",
					"children": [{
						"value": "0301",
						"text": "家政服务"
					}, {
						"value": "0302",
						"text": "养老机构"
					}, {
						"value": "0303",
						"text": "按摩足疗"
					}, {
						"value": "0304",
						"text": "酒吧娱乐"
					}, {
						"value": "0305",
						"text": "教育辅导"
					}, {
						"value": "0306",
						"text": "招生招聘"
					}, {
						"value": "0307",
						"text": "物业管理"
					}, {
						"value": "0308",
						"text": "音乐舞蹈"
					}, {
						"value": "0309",
						"text": "体育运动"
					}, {
						"value": "0310",
						"text": "中药养生"
					}, {
						"value": "0311",
						"text": "健康医疗"
					}, {
						"value": "0312",
						"text": "租聘中介"
					}, {
						"value": "0313",
						"text": "资讯公司"
					}, {
						"value": "0314",
						"text": "公益活动"
					}]
				}, ]

			};

			this.sigleItem = {
				title: '距离最近', //排序头的名称
				value: '距离最近',
				type: 0
			};
			let sigleItem1 = {
				title: '智能排序', //排序头的名称
				value: '智能排序',
				type: 1,
				data: [{
						value: 1,
						text: '不限'
					},
					{
						value: 2,
						text: '评分最高'
					},
					{
						value: 3,
						text: '距离最近'
					},
					{
						value: 4,
						text: '接单最多'
					}
				]

			};
			tempdata.data.push(this.sigleItem, normalItem, sigleItem1);
			this.datalist = tempdata;
		},
		methods: {
			// 获取分类信息
			change(e) {
				console.log('----------change----------');
				console.log(e);
			},
			select(e) {
				console.log('----------select----------');
				console.log(e);
			},
			changeTopItem(e) {
				console.log(e)
				if (e.type === 0) {
					this.positionInfo()
				}
			},
			positionInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log(res)
								uni.chooseLocation({
									latitude: res.latitude,
									longitude: res.longitude,
									success: e => {
										console.log(e)
										this.$set(this.sigleItem, 'title', e.name ? e.name : e.address)
										this.$set(this.sigleItem, 'value', e.name ? e.name : e.address)
									},
									fail: function(t) {}
								});
							}
						});
					},
					fail(err) { // 这里用户点取消了
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			info_tearch_details(e) {
				uni.navigateTo({
					url: '/pages/business/business_details?e=' + e
				})
			},
			searchinfo() {
				uni.navigateTo({
					url: '/pages/index/search',
				});
			},
			downCallback() {
				//联网加载数据
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				// let params = {
				// 	page_size: page.size,
				// 	page: page.num,
				// 	random_str: this.$dokey.getRandom(),
				// 	timestamp: this.$dokey.getTime(),
				// 	method: 'website.mould.log.list',
				// 	sign: this.$md5(this.$dokey.secretdate('website.mould.log.list'))
				// }
				// requestAll(params).then(resp => {
				// 	if (resp.code == 1) {
				// 		let data = resp.response_data
				// 		if (page.num == 1) this.dataArray = []; //如果是第一页需手动制空列表
				// 		this.dataArray = this.dataArray.concat(data.list); //追加新数据
				// 		if (page.num == 1) this.previewList = []
				// 		this.previewList = this.previewList.concat(data.list);
				// 		this.pageTotal = data.total_page
				// 		this.mescroll.endByPage(data.list.length, this.pageTotal);
				// 	}
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			}
		}
	};
</script>

<style lang="scss">
	.nav {
		display: flex;
		background-color: #037BC7;
		box-sizing: border-box;
		padding: 20rpx 20rpx;

		.nav_right {
			flex: 1;

			.search {
				box-sizing: border-box;
				width: 100%;
				height: 70rpx;
				border-radius: 35rpx;
				background-color: #FFFFFF;
				color: #B3B3B3;
				line-height: 70rpx;
				margin: 0 10rpx 0 0rpx;
				padding-left: 44rpx;
				font-size: 26rpx;

				.search_icon {
					vertical-align: middle;
				}
			}

		}
	}

	.teacher_search_box {
		box-sizing: border-box;
		display: flex;
		width: 656rpx;
		height: 52rpx;
		line-height: 52rpx;
		border: 2rpx #FC503E solid;
		margin-left: 52rpx;
		margin-top: 20rpx;
		border-radius: 38rpx;
		margin-bottom: 12rpx;

		.teacher_search {
			padding-left: 50rpx;
			width: 80%;
			font-size: 24rpx;
		}
	}


	.teacher_box {
		.mechanism_main_item {
			box-sizing: border-box;
			display: flex;
			width: 100%;
			margin-bottom: 12rpx;
			padding: 20upx 25rpx;
			background-color: #ffffff;

			.mechanism_main_item_left {
				flex: 0 0 160rpx;
				width: 161rpx;
				height: 161rpx;
				margin-right: 30rpx;
				overflow: hidden;

				image {
					display: block;
					margin: 0rpx auto;
					width: 100%;
					min-height: 100%;
				}
			}

			.mechanism_main_item_right {
				flex: 1;
				box-sizing: border-box;
				position: relative;

				.text1 {
					line-height: 45rpx;
					margin-bottom: 16rpx;

					.title {
						max-width: 300rpx;
						line-height: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 32rpx;
					}

					image {
						display: block;
						margin-left: 12rpx;
						width: 31rpx;
						height: 31rpx;
					}
				}

				.text2 {
					margin-bottom: 6rpx;

					view {
						font-size: 24rpx;

						text {
							display: inline-block;
							border: 1px solid #368AFF;
							height: 32rpx;
							margin-right: 16rpx;
							padding: 0 16rpx;
							line-height: 32rpx;
							border-radius: 16rpx;
							color: #368AFF;
						}
					}
				}

				.text3 {
					margin-bottom: 10rpx;

					view {
						.pingfen {
							display: inline-block;
						}
					}
				}
			}

			.text4 {
				font-size: 25rpx;
				color: #B3B3B3;
				line-height: 100%;
			}

			.serverNum {
				position: absolute;
				right: 0;
				bottom: 39rpx;
				font-size: 25rpx;
				color: #B3B3B3;
			}
		}

	}
</style>
